<template>
  <div class="login">
    <div class="top">
      <h1>找回密码</h1>
      <h4>请在下面输入用户名、新密码、验证码</h4>
    </div>
    <van-form @submit="onSubmit" ref="formValue">
      <van-cell-group inset class="username">
        <van-field
          v-model="formValue2.phone"
          name="用户名"
          label="用户名"
          placeholder="请输入注册时使用的电话号码"
          :rules="[{ required: true, message: '请填写正确的用户电话号码' }]"
        />
      </van-cell-group>
      <van-cell-group inset class="password">
        <van-field
          v-model="formValue2.newPassWord"
          type="password"
          name="新密码"
          label="新密码"
          placeholder="请输入新密码"
          :rules="[{ required: true, message: '新密码不能为空' }]"
        >
        </van-field>
      </van-cell-group>
      <van-cell-group inset class="getVC">
        <van-field
          v-model="formValue2.getVcValue"
          type="text"
          name="验证码"
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入正确的验证码' }]"
        >
        </van-field>
      </van-cell-group>
      <p class="VC">
        验证码：<span>{{ formValue2.vc }}</span>
        <router-link to="/login">
          <span class="back">返回</span>
        </router-link>
      </p>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          class="submitBtn"
          @click="onSubmit"
        >
          修改密码
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { forgetPW, getVC } from "@/api/register.js";
import { onMounted } from "vue";
import { showSuccessToast, showFailToast } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();
const formValue = ref(null);
const formValue2 = reactive({
  phone: "",
  newPassWord: "",
  phone: "",
  getVcValue: "",
  vc: "",
});
// 获取随机验证码
onMounted(async () => {
  await getVC()
    .then((res) => {
      formValue2.vc = res.data.Code;
    })
    .catch((err) => {
      console.log(err);
    });
});
// 定义onSubmit事件函数，给表单绑定提交事件，点击登录按钮时触发onSubmit事件
async function onSubmit() {
  console.log(formValue2.phone, formValue2.newPassWord, formValue2.getVcValue);
  await forgetPW(
    formValue2.phone,
    formValue2.newPassWord,
    formValue2.getVcValue
  )
    .then((res) => {
      console.log(res);
      if (res.success) {
        showSuccessToast(res.data.msg);
        router.push("/login");
      } else {
        showFailToast(res.data.msg);
        getVC()
        .then((res) => {
          formValue2.vc = res.data.Code;
        })
        .catch((err) => {
          console.log(err);
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
</script>

<style lang="less" scoped>
body {
  height: 100%;
  .login {
    height: 100%;
    width: 100%;
    background-image: url("../assets/images/forgetBG.png");
    background-size: cover;
    overflow: hidden;
    .top {
      padding-left: 5.333vw;
      margin-top: 18.333vw;
      line-height: 10.667vw;
      margin-bottom: 20.667vw;
      h1 {
        color: white;
        font-weight: bold;
        // text-align: center;
      }
      h4 {
        color: white;
        font-weight: bold;
        margin-top: 4.333vw;
      }
    }
  }
}
.username {
  margin-top: 6.667vw;
  margin-bottom: 6.667vw;
}
.password {
  margin-bottom: 6.667vw;
}
.forgetpwd {
  text-align: right;
  margin-bottom: 10.667vw;
  padding-right: 5.333vw;
  a {
    color: white;
    font-weight: bold;
  }
}
.VC {
  margin-top: 6.667vw;
  margin-left: 8vw;
  margin-bottom: 13vw;
  color: white;
  font-weight: bold;
  font-size: 4.4vw;
  span {
    color: aqua;
  }
  .back {
    color: white;
    margin-left: 42vw;
    font-size: 5.4vw;
    font-weight: bold;
  }
}
.submitBtn {
  font-size: 4.8vw;
  font-weight: bold;
}
</style>
